<script lang="ts" setup>
import { useSettingsStore } from "@/store/modules/settings"
import { ref,computed } from "vue"
// 设置仓库对象
const settingsStore = useSettingsStore()
const handleRefresh = ref(false)
/**
 * @description 刷新
 */
const refresh = () => {
  handleRefresh.value = true
  settingsStore.isRefresh = !settingsStore.isRefresh 
  setTimeout(() => {
    handleRefresh.value = false
  },1000)
}


</script>

<template>
  <div>
    <!-- 全屏 -->
    <el-tooltip effect="dark" content="刷新" placement="bottom">
      <el-icon :class="{'svg-icon':handleRefresh}" :size="20" @click="refresh"><Refresh /></el-icon>
    </el-tooltip>
  </div>
</template>

<style lang="scss" scoped>
.svg-icon {
  @keyframes refresh {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  animation: refresh 1s linear;
}
</style>
